<template>
  <div class="jobs-container">
    <h1>加入我们</h1>
    <div class="jobs-intro">
      <p>匠觉品牌事务所期待优秀的你加入我们的团队，一起打造极致的餐饮空间体验！</p>
    </div>
    
    <div class="jobs-list">
      <el-card v-for="job in jobs" :key="job.id" class="job-card">
        <div class="job-header">
          <h3>{{ job.title }}</h3>
          <el-tag :type="job.type">{{ job.category }}</el-tag>
        </div>
        
        <div class="job-info">
          <p><i class="el-icon-location"></i> {{ job.location }}</p>
          <p><i class="el-icon-money"></i> {{ job.salary }}</p>
          <p><i class="el-icon-user"></i> {{ job.experience }}</p>
        </div>
        
        <div class="job-description">
          <h4>职位描述：</h4>
          <ul>
            <li v-for="(desc, index) in job.description" :key="index">
              {{ desc }}
            </li>
          </ul>
          
          <h4>任职要求：</h4>
          <ul>
            <li v-for="(req, index) in job.requirements" :key="index">
              {{ req }}
            </li>
          </ul>
        </div>
        
        <div class="job-footer">
          <el-button type="primary" @click="handleApply(job)">申请职位</el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 申请表单对话框 -->
    <el-dialog
      title="职位申请"
      v-model="dialogVisible"
      width="50%">
      <el-form :model="applyForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="applyForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="applyForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="applyForm.email"></el-input>
        </el-form-item>
        <el-form-item label="简历">
          <el-upload
            action="/api/upload"
            accept=".pdf,.doc,.docx"
            :limit="1">
            <el-button type="primary">上传简历</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApply">提交申请</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Jobs',
  data() {
    return {
      dialogVisible: false,
      currentJob: null,
      applyForm: {
        name: '',
        phone: '',
        email: ''
      },
      jobs: [
        {
          id: 1,
          title: '室内设计师',
          category: '设计岗',
          type: 'success',
          location: '苏州',
          salary: '12k-20k',
          experience: '3年以上经验',
          description: [
            '负责餐饮空间的概念设计和深化设计',
            '对接客户需求，提供专业的设计方案',
            '把控项目设计质量，确保设计效果的实现'
          ],
          requirements: [
            '室内设计相关专业本科及以上学历',
            '3年以上餐饮空间设计经验',
            '精通CAD、3D MAX、SketchUp等设计软件',
            '有成熟的餐饮空间设计案例'
          ]
        },
        {
          id: 2,
          title: '项目经理',
          category: '管理岗',
          type: 'warning',
          location: '苏州',
          salary: '15k-25k',
          experience: '5年以上经验',
          description: [
            '负责餐饮空间设计项目的整体把控和管理',
            '协调设计团队、客户及施工方的工作',
            '确保项目按时高质量完成'
          ],
          requirements: [
            '建筑或室内设计相关专业本科及以上学历',
            '5年以上项目管理经验',
            '熟悉装修施工流程和材料预算',
            '优秀的沟通协调能力和团队管理能力'
          ]
        }
      ]
    }
  },
  methods: {
    handleApply(job) {
      this.currentJob = job
      this.dialogVisible = true
    },
    submitApply() {
      // 这里添加提交申请的逻辑
      this.$message.success('申请提交成功！')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.jobs-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.jobs-intro {
  margin-bottom: 30px;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}

.job-card {
  margin-bottom: 20px;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.job-header h3 {
  margin: 0;
  color: #333;
}

.job-info {
  margin-bottom: 20px;
  color: #666;
}

.job-info p {
  margin: 10px 0;
}

.job-info i {
  margin-right: 8px;
}

.job-description {
  margin-bottom: 20px;
}

.job-description h4 {
  margin: 15px 0 10px 0;
  color: #333;
}

.job-description ul {
  padding-left: 20px;
  color: #666;
}

.job-description li {
  margin: 5px 0;
}

.job-footer {
  text-align: right;
  margin-top: 20px;
}
</style> 